<template>
    <a-modal v-model="filterVisible" title="VAR模型" :footer="null" :centered="true">
        <a-spin :spinning="spinning" tip="计算中……">
            <div class="variables">
                <div class="h2">选择变量：<a-checkbox @click="selectAll" :indeterminate="checkedList.length>0&&checkedList.length<list.length" :checked="checkedList.length===list.length&&list.length>0">全选</a-checkbox></div>
                <div class="list">
                    <a-checkbox-group v-model="checkedList">
                        <div class="check-item" v-for="item in list" :key="item.index">
                            <a-checkbox :value="item.index">{{item.name}}</a-checkbox>
                        </div>
                    </a-checkbox-group>
                </div>
            </div>

            <div class="other">
                <a-row :gutter="[16,16]">
                    <a-col :span="24">
                        <div class="box">
                            <div class="name">模型附加项</div>
                            <div class="checkbox">
                                <a-radio-group v-model="type">
                                    <a-radio :value="1">无</a-radio>
                                    <a-radio :value="2">截距项</a-radio>
                                    <a-radio :value="3">趋势项</a-radio>
                                    <a-radio :value="4">截距项+趋势项</a-radio>
                                </a-radio-group>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>

            <div class="other">
                <a-row>
                    <a-col :span="3"><div class="label">预测到</div></a-col>
                    <a-col :span="6">
                        <a-select style="width:120px" v-model="ahead">
                            <a-select-option v-for="(item,key) in forcastTimes" :value="key+1" :key="item.timeCode">{{item.name}}</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span="2"></a-col>
                    <a-col :span="3"><div class="label">滞后阶数</div></a-col>
                    <a-col :span="6">
                        <a-input-number v-model="number" :min="0" />
                    </a-col>
                </a-row>
            </div>

            <div class="btns">
                <a-button type="primary" ghost @click="cancel">取消</a-button>
                <a-button type="primary" @click="goApply">应用</a-button>
            </div>
        </a-spin>
    </a-modal>
</template>

<script>
import { messageTips, setSessionItem } from '../../../until/tools';
import { getForcastTime } from '../../../until/data_tools';
export default {
    props:['visible','sheetId','times','endYear','freqId'],
    data() {
        return {
            filterVisible:false,
            list:[],
            checkedList:[],
            number:5,
            type:1,
            ahead:null,
            spinning:false
        }
    },
    computed:{
        forcastTimes() {
            if(this.freqId&&this.endYear&&this.times.length>0) {
                let arr = [];
                if(this.freqId===1) {
                    if(this.times[this.endYear]) {
                        arr = getForcastTime(this.freqId,this.times[this.endYear].dimCode);
                    }
                } else if(this.freqId===3||this.freqId===4) {
                    if(typeof this.endYear==='string') {
                        let endKey = this.endYear.split('-').map(item=>parseInt(item));
                        if(this.times[endKey[0]]&&this.times[endKey[0]].children[endKey[1]]) {
                            arr = getForcastTime(this.freqId,this.times[endKey[0]].children[endKey[1]].dimCode);
                        }
                    }
                }
                
                return arr;
            }
            return [];
        }
    },
    watch:{
        visible(value) {
            if(value) {
                this.list = [];
                this.checkedList = [];
                this.number = 5;
                this.type = 1;
                this.ahead = null;
                this.spinning = false;
                this.$http.cloud_get_variables({action:'regression',sheetId:this.sheetId}).then(res=>{
                    if(res.deptVars) {
                        this.list = res.deptVars;
                    }
                })
                this.filterVisible = true;
            }
        },
    },
    methods:{
        cancel() {
            this.filterVisible = false;
        },

        selectAll() {
            if(this.checkedList.length === this.list.length) {
                this.checkedList = [];
            } else {
                this.list.forEach(item=>{
                    let index = this.checkedList.indexOf(item.index);
                    if(index===-1) {
                        this.checkedList.push(item.index);
                    }
                });
            }            
        },

        goApply() {
            if(this.checkedList.length===0) {
                messageTips('请选择变量',2);
                return false;
            }
            if(this.ahead===null) {
                messageTips('请选择预测时间',2);
                return false;
            }
            let params = {
                ahead:this.ahead,
                indexs:this.checkedList.join(','),
                lags:this.number,
                type:this.type,
                sheetId:this.sheetId
            }
            this.spinning = true;
            this.$http.cloud_set_var(params).then(res=>{
                this.spinning = false;
                if(res.success===false) {
                    messageTips(res.message,1);
                    return false;
                }
                if(res.isRefresh) {
                    this.$emit('refreshData',true);
                }
                this.filterVisible = false;
                let result = {'analysis_varModel':res}
                setSessionItem('analysis_varModel',JSON.stringify(result));
                let {href} = this.$router.resolve({path: '/analysis_varModel'});
                window.open(href, '_blank');
            });
        },
    }
}
</script>

<style lang="scss" scoped>
    .h2 {
        font-weight: bold;
        .ant-checkbox-wrapper {
            font-weight:normal;
        }
    }
    .label {
        font-weight: bold;
        height:32px;
        line-height: 32px;
    }
    .variables {
        .list {
            height:150px;
            border:1px solid #ddd;
            margin:10px 0;
            padding:5px 10px;
            overflow-y: auto;
            .check-item {
                padding:3px 0;
            }
        }
    }
    .other {
        padding-top: 20px;
    }

    .box {
        margin:10px 0;
        border:1px solid #ddd;
        padding:10px 0 10px 10px;
        position: relative;
        .name {
            background:#fff;
            padding:0 10px;
            position: absolute;
            top:-10px;
            left:10px;
        }
        .checkbox {
            padding:10px 0;
            .item {
                height:32px;
                line-height: 32px;
                .item-inner {
                    display: inline-block;
                    width:80px;
                }
            }
        }
    }
</style>